<template>
	<view class="">
		<view class="floorTable" >
			<view class="tableItem">
				<image :src="imgUrl + content[0].img" mode=""></image>
			</view>
			<view class="tableItem" style="background: #7064ca;">
				<view class="tablebigTitle">
					{{content[0].name}}
				</view>
				<view class="tablesmallTitle">
					{{content[0].summary}}
				</view>
				<view class="tableLine">
					
				</view>
				<view class="tablePrice">
					￥{{content[0].price}}
				</view>
			</view>
			<view class="tableItem" style="background: #f65c5c;">
				<view class="tablebigTitle">
					{{content[1].name}}
				</view>
				<view class="tablesmallTitle">
					{{content[1].summary}}
				</view>
				<view class="tableLine">
					
				</view>
				<view class="tablePrice">
					￥{{content[1].price}}
				</view>
			</view>
			<view class="tableItem">
				<image :src="imgUrl + content[1].img" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			content:{
				type:Array,
				default(){
					return []
				}
			}
		},
		data(){
			return{
				imgUrl:this.$imgUrl
			}
		}
	}
</script>

<style>
	.floorTable{
		display: flex;
		flex-wrap: wrap;
	}
	.tableItem{
		width: 50%;		// 图片外面套的盒子宽可按照百分比来给
		height: 330rpx; // 但是要给固定高 否则盒子里面的图片无法给宽高
	}
	.floorTable image{
		width: 100%;
		height: 330rpx;
	}
	
	.tablebigTitle{
		font-size: 30rpx;
		line-height: 46rpx;
		color: #fff;
		padding-top: 30rpx;
		padding-left: 30rpx;
		padding-right: 100rpx;
	}
	.tablesmallTitle{
		line-height: 30rpx;
		color: rgba(255, 255, 255, .8);
		font-size: 28rpx;
		padding-left: 30rpx;
		padding-right: 40rpx;
		padding-top: 15rpx;
		overflow: hidden; // 多行文本设置显示行数 掩藏显示...
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp:2;
		-webkit-box-orient:vertical;
	}
	.tableLine{
		width: 35rpx;
		height: 5rpx;
		background: #fff;
		margin-left: 30rpx;
		margin-top: 25rpx;
	}
	.tablePrice{
		line-height: 100rpx;
		margin-left: 30rpx;
		font-size: 36rpx;
		color: rgba(255, 255, 255, .8);
	}
</style>
